<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/ssm/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/ssm/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/ssm/css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }

        .top-panel > .layui-card-body {
            height: 60px;
            line-height: 60px;
            font-size: 30px;
        }

        .top-panel-number {
            line-height: 60px;
            font-size: 30px;
            border-right: 1px solid #eceff9;
        }

        .top-panel-tips {
            line-height: 30px;
            font-size: 12px
        }

        .layui-card-header {
            color: #009f95;
        }
    </style>
</head>
<body>
<!--<div class="layuimini-container">-->
<div class="layuimini-main">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">新活动
                    <span class="layui-badge layui-bg-green layuiadmin-badge">周</span>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5" id="active">
                        10
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">新会员
                    <span class="layui-badge layui-bg-green layuiadmin-badge">月</span>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5" id="member">
                        10
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">新留言
                    <span class="layui-badge layui-bg-green layuiadmin-badge">周</span>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5" id="message">
                        10
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">新职位
                    <span class="layui-badge layui-bg-green layuiadmin-badge">月</span>
                </div>
                <div class="layui-card-body" id="job">
                    10
                </div>
            </div>

        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md12">
            <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>


    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md12">
            <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
    </div>


</div>
<!--</div>-->
<script src="/ssm/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/ssm/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer', 'echarts'], function () {
        let $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;

        // 发送异步请求发送看板数据
        $.get("/ssm/echarts/dataPanel", function (res) {
            if (res.code == 0) {
                let dataPanel = res.data;
                // 1. 设置新活动数据
                $("#active").text(dataPanel.active)
                // 2. 设置新会员数据
                $("#member").text(dataPanel.member)
                // 3. 设置新留言数据
                $("#message").text(dataPanel.message)
                // 4. 设置新岗位数据
                $("#job").text(dataPanel.recruit)
            }
        })


        // 发送异步请求 获取折线图数据
        $.get('/ssm/echarts/lineData', function (res) {
            if (res.code == 0) {
                let lineData = res.data
                // 遍历结果集
                let numbers = lineData.map(line => line.number)
                /**
                 * 报表功能
                 */
                let echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

                let optionRecords = {
                    title: {
                        text: '本年度会员注册数'
                    },
                    tooltip: {
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: numbers,
                            type: 'line',
                            smooth: true
                        }
                    ]
                };
                echartsRecords.setOption(optionRecords);

            }
        })


        // 发送异步请求 获取饼图数据

        $.get('/ssm/echarts/dataPie', function (res) {
            if (res.code == 0) {

                let pieData = res.data

                // [{value,name},{}]
                let pies = pieData.map(dt => {
                    return {
                        value: dt.number,
                        name: dt.course_name
                    }
                })
                /**
                 * 饼图
                 */
                let echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden');

                let optionDataset = {
                    title: {
                        text: '课程预约占比'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '课程名称',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 30,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: pies
                        }
                    ]
                };

                echartsDataset.setOption(optionDataset);

            }
        })


        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
</body>
</html>
